<template>
  <a-modal v-model:visible="isShowForm" width="35%" :mask-closable="false" @ok="save" @cancel="close" :closable="false" :popupContainer="false" style="transform: scale(1.3)">
    <template #title>
      <span style="font-size: 24px">用户验证</span>
    </template>
    <a-form :model="userForm" :rules="rules" auto-label-width>
      <a-form-item field="username" label="用户名" validate-trigger="input" required>
        <a-input v-model="userForm.username" size="large" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item field="password" label="密码" validate-trigger="input" required>
        <a-input v-model="userForm.password" size="large" type="password" placeholder="请输入密码" />
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footer">
        <a-button @click="close" style="width: 45%; height: 45px; font-size: 24px; color: #fff; background-color: #ccc">取消</a-button>
        <a-button type="primary" @click="save" style="width: 45%; height: 45px; font-size: 24px">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../store/main/main.js'
import useSetStore from '../../store/setting/setting.js'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const router = useRouter()
const setStore = useSetStore()
const { setting } = storeToRefs(setStore)
const mainStore = useMainStore()
const { userForm, isShowForm, userInfo } = storeToRefs(mainStore)
const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
}
const save = async () => {
  try {
    const isValid = await validateUserForm(userInfo.value.userInfo, userForm.value)
    if (isValid) {
      mainStore.setAuthenticated(true)
      mainStore.setShowForm(false)
      router.push('/handle')
      userForm.value.username = ''
      userForm.value.password = ''
    } else {
      Message.error('用户名或密码错误')
    }
  } catch (error) {
    console.error(error)
  }
  // mainStore.setAuthenticated(false)
}

const close = () => {
  mainStore.setShowForm(false)
}

// 这里应该是一个实际的验证函数，可能涉及网络请求等
const validateUserForm = async (userInfoArray, obj) => {
  return userInfoArray.some((user) => user.username === obj.username && user.password === obj.password)
}
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 24px;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.openClick-bucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.openbucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>
